<template>
    <!-- use the modal component, pass in the prop -->
    <mobileModal v-if="stateManager.SeeDialogVisible"
           @cancel="closeDialog"
           @ok="closeDialog"
           :modal-title="modalTitle"
           model-size="normal">
        <!--
          you can use custom content here to overwrite
          default content
        -->

                <div class="col-xs-12" v-if="item == ''">
                    <div class="ibox">
                        <div class="ibox-content product-box active">
                            <div class="product-imitation center-block hand-menu-con" v-on:click="seeItem(model.contexts[0])">
                                <img alt="图片" class="img-responsive center-block" :src="urlCheck(model.contexts[0].thumb_url)">
                            </div>
                            <div class="product-desc ">
                                <span class="product-price content-title hand-menu-con" v-on:click="seeItem(model.contexts[0])">
                               {{model.contexts[0].title}}
                                </span>
                                <div class="small m-t-xs hand-menu-con" v-for="(context,key) in model.contexts">
                                    <div class="row" v-if="key != 0" v-on:click="seeItem(context)">
                                        <div class="col-xs-8 ">
                                            <h4 class="content-title" >{{context.title}}</h4>
                                        </div>
                                        <div class="col-xs-4">
                                            <img class="img-responsive" :src="urlCheck(context.thumb_url)">
                                            <!--<i class="default">缩略图</i>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <div class="col-xs-12" v-if="item != ''">
                    <div class="wx_phone_preview_appmsg">
                        <div class="rich_media">
                            <h2 class="rich_media_title">{{item.title}}</h2>
                            <div class="rich_media_meta_list">
                                <em class="rich_media_meta rich_media_meta_text">{{item.author}}</em>
                                <em class="rich_media_meta rich_media_meta_text">{{item.created_at}}</em>
                                <span class="rich_media_meta rich_media_meta_link hand-menu-con pull-right " v-on:click="unsetItem()" title="请发送到手机查看完整效果">返回</span>
                            </div>
                            <div class="rich_media_thumb_wrp" v-if="item.show_cover_pic ==0">
                                <img class="rich_media_thumb" :src="item.thumb_url" alt="">
                            </div>
                            <div class="rich_media_content" v-html="item.content">
                                {{item.content}}
                            </div>
                        </div>
                    </div>
            </div>
    </mobileModal>


</template>
<style scoped>
    .product-imitation{
        padding: 0px;
    }
    .product-imitation img{
        width: 250px;
    }
    .product-price{
        width: 100%;
        background-color:rgba(0,0,0,0.7);
    }

</style>
<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                item:'',
                model: this.$modelDataSource({
                    url: 'api/WeChat/WeChatArt',
                    dataKey: 'model',
                    attributes: {
                        id: 0,
                        contexts:[]
                    }
                })
            };
        },
        methods: {
            closeDialog: function () {
                this.item='';
                this.stateManager.SeeModelId = 0;
                this.stateManager.SeeDialogVisible = false;
            },
            urlCheck:function (url) {
                if(url){
                    return url
                }else{
                    return 'http://tjise.daxuefun.cn/images/failed.png'
                }
            },
            seeItem:function (item) {
                this.item=item;
            },
            unsetItem(){
                this.item='';
            }
        },
        computed: {
            modalTitle: function () {
                return '查看图文素材';
            }
        },
        watch: {
            'stateManager.SeeModelId': function (newValue) {
                this.model.fetch(newValue);
            }
        }
    }
</script>